<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('专家管理-查询统计')" />
</head>
<body class="gray-bg">
     <div class="container-div" id="zhuanjia_list">
        <div class="row">

            <div style="margin-top: 10px;">
                <div class="col-sm-2">
                    <div class="ibox" style="border-left: 3px solid #1ab394;">
                        <div class="ibox-content">
                            <h5>正常状态专家</h5>
                            <h1 class="no-margins">{{countZhengchang}}名</h1>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="ibox" style="border-left: 3px solid #1c84c6;">
                        <div class="ibox-content">
                            <h5>1990年专家</h5>
                            <h1 class="no-margins">{{count90}}名</h1>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="ibox" style="border-left: 3px solid #1c84c6;">
                        <div class="ibox-content">
                            <h5>1991年专家</h5>
                            <h1 class="no-margins">{{count91}}名</h1>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="ibox" style="border-left: 3px solid #1c84c6;">
                        <div class="ibox-content">
                            <h5>1992年专家</h5>
                            <h1 class="no-margins">{{count92}}名</h1>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="ibox" style="border-left: 3px solid #1c84c6;">
                        <div class="ibox-content">
                            <h5>1993年专家</h5>
                            <h1 class="no-margins">{{count93}}名</h1>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="ibox" style="border-left: 3px solid #1c84c6;">
                        <div class="ibox-content">
                            <h5>1994年专家</h5>
                            <h1 class="no-margins">{{count94}}名</h1>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label style="width: 80px !important;">专家&nbsp;&nbsp;</label>
                                <input style="width: 150px !important;" type="text" v-model="xingming"/>
                            </li>
                            <li>
                                <label style="width: 80px">特贴单位&nbsp;&nbsp;</label>
                                <el-select style="width: 150px !important;" v-model="deptname" filterable placeholder="请选择">
                                    <el-option
                                            v-for="(item, index) in dept_select"
                                            :label="item.deptname"
                                            :value="item.deptid"
                                            :key="index"
                                    ></el-option>
                                </el-select>
                            </li>
                            <li>
                                <label style="width: 80px">单位层级&nbsp;&nbsp;</label>
                                <select style="width: 150px !important;" v-model="deptlevel" class="form-control" type="text">
                                    <option value="">请选择</option>
                                    <option v-if="jigoujibie<=1" value="1">一级单位</option>
                                    <option v-if="jigoujibie<=2" value="2">二级单位</option>
                                    <option v-if="jigoujibie<=3" value="3">三级单位</option>
                                </select>
                            </li>
                            <li>
                                <label style="width: 80px !important;">工作单位&nbsp;&nbsp;</label>
                                <input style="width: 150px !important;" type="text" v-model="gongzuodanwei"/>
                            </li>
                            <li>
                                <label style="width: 80px !important;">入选年份&nbsp;&nbsp;</label>
                                <select style="width: 150px !important;" v-model="ruxuannianfen" class="form-control" type="text">
                                    <option value="">请选择</option>
                                    <option value="1990">1990</option>
                                    <option value="1991">1991</option>
                                    <option value="1992">1992</option>
                                    <option value="1993">1993</option>
                                    <option value="1994">1994</option>
                                </select>
                            </li>
                            <li>
                                <label style="width: 80px !important;">专家状态&nbsp;&nbsp;</label>
                                <select style="width: 150px !important;" th:with="type=${@dict.getType('sys_zhuanjiazhuangtai')}" v-model="zhuanjiazhuangtai" class="form-control" type="text">
                                    <option value="">请选择</option>
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                </select>
                            </li>
                            <li>
                                <label style="width: 150px !important;">专家状态变动时间&nbsp;&nbsp;</label>
                                <input style="width: 170px !important;" type="text" class="" placeholder="请选择变动状态开始日期" name="zhuanjiazhuangtaibiandongshijian_kaishi" id="zhuanjiazhuangtaibiandongshijian_kaishi" v-model="zhuanjiazhuangtaibiandongshijian_kaishi" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'zhuanjiazhuangtaibiandongshijian_jieshu\')}'})"  @blur="getDate"/>
                                <input style="width: 170px !important;" type="text" class="" placeholder="请选择变动状态结束日期" name="zhuanjiazhuangtaibiandongshijian_jieshu" id="zhuanjiazhuangtaibiandongshijian_jieshu" v-model="zhuanjiazhuangtaibiandongshijian_jieshu" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'zhuanjiazhuangtaibiandongshijian_kaishi\')}'})"  @blur="getDate"/>
                            </li>
                            <li class="sousuo">
                                <a class="btn btn-success btn-md" @click="bindZhuanjiaList"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-md" @click="reset"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="col-sm-12 select-table table-striped">

                <div style="display: flex">
                    <div class="btn-group-md" id="toolbar" role="group">
                        <button class="btn btn-warning dim" @click="Export">
                            <i class="fa fa-download"></i> 导出
                        </button>
                    </div>
                </div>

                <table id="bootstrap-table" class="table table-bordered table-hover table-striped">
                    <thead>
                        <tr>
                            <th style="width: 50px;">序号</th>
                            <th>专家代码</th>
                            <th>专家姓名</th>
                            <th>特贴单位</th>
                            <th>特贴单位层级</th>
                            <th>工作单位</th>
                            <th>入选年份</th>
                            <th>专家状态</th>
                            <th>备注</th>
                            <th>状态变动时间</th>
                            <th>专家状态变动记录</th>
<!--                            <th>拨款记录</th>-->
                            <th style="width: 100px;">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(zhuanjiaitem,index) in zhuanjialist"  v-if="zhuanjialist.length > 0">
                            <td v-text="index+1"></td>
                            <!--专家代码-->
                            <td v-text="zhuanjiaitem.zhuanjiaid"></td>
                            <!--专家姓名-->
                            <td v-text="zhuanjiaitem.xingming" style=" text-align: center;color:#1c84c6;cursor: pointer" title="联系方式" @click="toLianxifangshi(zhuanjiaitem)"></td>
                            <!--特贴单位-->
                            <td v-text="zhuanjiaitem.deptname"></td>
                            <!--特贴单位层级-->
                            <td v-text="zhuanjiaitem.deptlevel_text"></td>
                            <!--工作单位-->
                            <td v-text="zhuanjiaitem.gongzuodanwei"></td>
                            <!--入选年份-->
                            <td v-text="zhuanjiaitem.ruxuannianfen"></td>
                            <!--专家状态-->
                            <td v-if="zhuanjiaitem.zhuanjiazhuangtai=='99'" style="color: #1ab394" v-text="zhuanjiaitem.zhuanjiazhuangtai_text"></td>
                            <td v-else-if="zhuanjiaitem.zhuanjiazhuangtai=='6'" style="color: #ed5565" v-text="zhuanjiaitem.zhuanjiazhuangtai_text"></td>
                            <td v-else style="color: #f8ac59" v-text="zhuanjiaitem.zhuanjiazhuangtai_text"></td>
                            <!--备注-->
                            <td v-text="zhuanjiaitem.beizhu1"></td>
                            <!--状态变动时间-->
                            <td v-text="zhuanjiaitem.zhuangtaibiandongshijian"></td>
                            <!--专家状态变动记录-->
                            <td><button class="btn btn-success btn-md" @click="showHistoryModel(zhuanjiaitem.zhuanjiaid,zhuanjiaitem.xingming)">查看</button></td>
                            <!--拨款记录-->
<!--                            <td><button class="btn btn-success btn-md" @click="">查看</button></td>-->
                            <!--操作-->
                            <td>
                                <button class="btn btn-success btn-md" @click="toChakan(zhuanjiaitem)">详情</button>
                            </td>
                        </tr>
                        <tr v-if="zhuanjialist.length == 0">
                            <td style="text-align: center; vertical-align: middle" colspan="12">查无数据</td>
                        </tr>
                    </tbody>
                </table>
                <!--翻页-->
                <div v-if="recordCount != '0'" class="my-page-navigation" style="text-align:center;">
                    <button class="btn btn-default" @click="firstPage">首页</button>
                    <button class="btn btn-default" @click="prePage">上一页</button>
                    <select class="custom-select border-secondary" v-model="pagesize">
                        <option value="10">10 条/页</option>
                        <option value="20">20 条/页</option>
                        <option value="30">30 条/页</option>
                        <option value="50">50 条/页</option>
                    </select>
                    <span v-text="pageindex + '  /  ' + pageCount" style="border-color: #6c757d"></span>
                    <span v-text="'共' + recordCount + '条'" style="border-color: #6c757d"></span>
                    <button class="btn btn-default" @click="nextPage">下一页</button>
                    <button class="btn btn-default" @click="lastPage">尾页</button>
                    <span style="border-color: #6c757d">跳到第</span>
                    <input type="text" class="form-control border-secondary" style="width:50px;display:inline;" v-model="targetpage" @keyup.enter="targetPage">
                    <span style="border-color: #6c757d">页</span>
                    <button class="btn btn-default" @click="targetPage">跳</button>
                </div>

            </div>
        </div>

        <!--联系方式-->
         <div th:replace="system/zhuanjiaguanli/modal_lianxifangshi::lianxifangshi"></div>
         <!--查看-->
         <div th:replace="system/zhuanjiaguanli/modal_chakan::zhuanjia_chakan"></div>
         <!-- 专家变动历史 -->
         <div th:replace="system/zhuanjiaguanli/modal_history::history_list"></div>

    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: WdatePicker" />
     <link th:href="@{/elementui/indexbak.css}" rel="stylesheet">
     <script th:src="@{/elementui/index.js}"></script>
     <script th:inline="javascript">

        var prefix = ctx + "system/zhuanjia";

        var vm_zhuanjia_list = new Vue({
            el: "#zhuanjia_list",
            data: {
                deptid : $("#deptid").val(),//当前登录的单位ID
                jigoujibie: $("#jigoujibie").val(),//当前登录的单位级别

                //查询用字段
                xingming: "",//专家姓名
                deptname: "",//单位名称
                deptlevel: "",//单位级别
                gongzuodanwei: "",//工作单位
                ruxuannianfen: "",//入选年份
                zhuanjiazhuangtai: "99",//专家状态
                zhuanjiazhuangtaibiandongshijian_kaishi: "",//变动状态开始
                zhuanjiazhuangtaibiandongshijian_jieshu: "",//变动结束时间

                dept_select : [],//单位字典

                //查询列表
                zhuanjialist:[],//专家列表
                zhuanjia:{},//单个专家

                lianxifangshiList:[],//单位联系方式
                historylist:[],

                //头部统计
                countZhengchang:0,
                count90:0,
                count91:0,
                count92:0,
                count93:0,
                count94:0,

                //翻页
                pageindex: 1,		// 查询分页初始化页
                pagesize: 10,		// 查询分页初始化页面大小
                pageCount: 0,		// 总页数
                recordCount: 0,	// 总记录数
                targetpage: '', 	// 目标页

                //操作
                editflag:'',//添加或修改标记

            },
            created: function () {
                var _this = this;

                //绑定专家列表
                _this.bindZhuanjiaList();
                _this.InitSelect();
            },
            watch:{
                //监控分页情况，刷新列表
                pageindex: function () {
                    this.bindZhuanjiaList();
                },

                pagesize: function () {
                    this.bindZhuanjiaList();
                },
            },
            methods: {

                //绑定单位字典
                InitSelect:function(){
                    var _this = this;

                    $.post('/system/deptxinxi/subdeptlist', {
                        deptid:_this.deptid,
                        rdm : Math.random()
                    },function(ppData) {
                        if (ppData != null) {
                            _this.dept_select = ppData.resultContent;
                        }
                    },"json");
                },

                // 绑定专家列表
                bindZhuanjiaList: function () {
                    var _this = this;

                    var zhuanjia_layer = layer.open({type: 3});
                    $.post(prefix+'/customlist', {
                        deptid: _this.deptid,
                        xingming: _this.xingming,
                        deptname: _this.deptname,
                        deptlevel: _this.deptlevel,
                        gongzuodanwei: _this.gongzuodanwei,
                        ruxuannianfen: _this.ruxuannianfen,
                        zhuanjiazhuangtai:_this.zhuanjiazhuangtai,
                        zhuanjiazhuangtaibiandongshijian_kaishi: _this.zhuanjiazhuangtaibiandongshijian_kaishi,
                        zhuanjiazhuangtaibiandongshijian_jieshu: _this.zhuanjiazhuangtaibiandongshijian_jieshu,
                        pageindex: _this.pageindex,
                        pagesize: _this.pagesize,
                        rdm: Math.random()
                    }, function (ppData) {
                        layer.close(zhuanjia_layer);

                        if (ppData != null) {
                            if (ppData.result=='1'){

                                //专家列表
                                var data = ppData.resultContent;
                                _this.zhuanjialist = data.zhuanjialist;

                                //翻页
                                var pageInfo = data.PageInfo;
                                _this.pageindex = pageInfo.pageIndex;
                                _this.pageCount = pageInfo.pageCount;
                                _this.recordCount = pageInfo.recordCount;
                                _this.targetpage = '';

                                //页面统计
                                var countInfo = data.CountInfo;
                                _this.countZhengchang=countInfo.countzhengchang;
                                _this.count90=countInfo.count90;
                                _this.count91=countInfo.count91;
                                _this.count92=countInfo.count92;
                                _this.count93=countInfo.count93;
                                _this.count94=countInfo.count94;

                            }else{
                                layer.alert(ppData.message);
                            }
                        }
                    }, "json");
                },

                //审核记录
                showHistoryModel:function(ppZhuanjiaId,ppXingming){
                    var _this = this;

                    $("#HistoryModalLabel").html(ppXingming);
                    $("#HistoryModal").modal();

                    _this.bindHistory(ppZhuanjiaId);
                },

                bindHistory:function(ppZhuanjiaId){
                    var _this = this;

                    $.post('/system/biandonghistory/findcustomlist', {
                        zhuanjiaid : ppZhuanjiaId,
                        rdm : Math.random()
                    },function(ppData) {
                        if (ppData != null) {
                            _this.historylist = ppData.resultContent;
                        }
                    },"json");
                },

                //绑定日期
                getDate:function () {
                    var _this = this;
                    _this.zhuanjiazhuangtaibiandongshijian_kaishi=$("#zhuanjiazhuangtaibiandongshijian_kaishi").val();
                    _this.zhuanjiazhuangtaibiandongshijian_jieshu=$("#zhuanjiazhuangtaibiandongshijian_jieshu").val();
                },

                //首页
                firstPage: function () {
                    this.pageindex = 1;
                },
                //尾页
                lastPage: function () {
                    this.pageindex = this.pageCount;
                },
                //上一页
                prePage: function () {
                    var prePage = ((this.pageindex - 1) <= 0) ? 1 : (this.pageindex - 1);
                    this.pageindex = prePage;
                },
                //下一页
                nextPage: function () {
                    var nextPage = ((this.pageindex + 1) >= this.pageCount) ? this.pageCount : (this.pageindex + 1);
                    this.pageindex = nextPage;
                },
                //跳到目标页
                targetPage: function () {
                    if (this.targetpage != '' && this.targetpage <= this.pageCount && this.targetpage > 0) {
                        this.pageindex = this.targetpage;
                        this.targetpage = '';
                    }
                },

                //重置搜索项
                reset: function () {
                    var _this = this;

                    _this.xingming = "";
                    _this.deptname = "";
                    _this.deptlevel = "";
                    _this.gongzuodanwei = "";
                    _this.ruxuannianfen = "";
                    _this.zhuanjiazhuangtai = "";
                    _this.zhuanjiazhuangtaibiandongshijian_kaishi = "";
                    _this.zhuanjiazhuangtaibiandongshijian_jieshu = "";

                    _this.pageindex = 1;	// 查询分页初始化页
                    _this.pagesize = 10;	// 查询分页初始化页面大小
                    _this.pageCount = 0;	// 总页数
                    _this.recordCount = 0;	// 总记录数
                    _this.targetpage = ''; 	// 目标页
                    _this.bindZhuanjiaList();
                },

                // 点击查看
                toChakan: function (zhuanjiaitem) {
                    var _this = this;

                    $("#myModalLabel1").html("查看专家信息");
                    $("#modal-dialog1").attr("style", "width:1200px;");
                    $("#zhuanjiaModal1").modal();

                    _this.zhuanjia=zhuanjiaitem;
                },

                //点击联系方式
                toLianxifangshi:function (zhuanjiaitem) {
                    var _this = this;
                    _this.zhuanjia = zhuanjiaitem;

                    $.post('/system/deptxinxi/findLianxifangshi', {
                        deptid: _this.zhuanjia.deptid,
                        rdm: Math.random()
                    }, function (ppData) {
                        if (ppData != null) {
                            var data = ppData.resultContent;
                            _this.lianxifangshiList = data;
                        }
                    }, "json");
                    $("#myModalLabel2").html(zhuanjiaitem.xingming);
                    $("#lianxifangshiModal").modal();
                },

                Export:function(){
                    var _this = this
                    location.href = "/system/daochu/zhuanjiaxinxi?deptid="+_this.deptid
                        +"&xingming="+_this.xingming
                        +"&deptname="+_this.deptname
                        +"&deptlevel="+_this.deptlevel
                        +"&gongzuodanwei="+_this.gongzuodanwei
                        +"&ruxuannianfen="+_this.ruxuannianfen
                        +"&zhuanjiazhuangtai="+_this.zhuanjiazhuangtai
                        +"&zhuanjiazhuangtaibiandongshijian_kaishi="+_this.zhuanjiazhuangtaibiandongshijian_kaishi
                        +"&zhuanjiazhuangtaibiandongshijian_jieshu="+_this.zhuanjiazhuangtaibiandongshijian_jieshu
                },

            }
        })
    </script>
</body>
</html>